<template>
    <ul>
      <li v-for="(item, index) in data.children">
        <span @click="deptDetails(item, index)" :class="{'selectBgc': (item.id==selectedId)}">
          <i class="fa fa-minus-circle"></i>{{ item.deptName }}
        </span>
        <i @click="update(item)" v-if="updataShow" style="color: rgb(24,144,255)" class="el-icon-edit-outline"></i>
        <i @click="deleteDept(item)" v-if="deleteShow" style="color: rgb(255,109,109); margin-left: 4px;" class="el-icon-delete-solid"></i>
        <tree-node :data="item" :selectedId="selectedId" @deptDetails="deptDetails"></tree-node>
      </li>
    </ul>
</template>

<script>
  export default {
   name: 'tree-node',
   props: ["data", "selectedId"],
   data () {
     return {
       updataShow: false,
       deleteShow: false,
     }
   },
   created(){

   },
   mounted() {
     this.bus.$on('updateShow', (treeNode) => {
       this.updataShow = treeNode;
     });
     
     this.bus.$on('deleteShow', (treeNode) => {
       this.deleteShow = treeNode;
     })
   },
   methods: {
    update(item){
      this.bus.$emit('tree-update', item);
    },
    deptDetails(item) {
      this.$emit('deptDetails', item)
      this.bus.$emit('selectedId', item.id);
    },
    deleteDept(item) {
      this.bus.$emit('tree-delete', item)
    }
   }
  }
</script>

<style scoped>
  ul, li {
     list-style-type: none;
   }

   .tree {
     display: block;
     position: relative;
     padding: 5px 15px;
   }

   .tree span {
     display: inline-block;
     box-sizing: border-box;
     height: 30px;
     line-height: 28px;
     min-width: 60px;
     text-align: center;
     color: #888;
     border: 1px solid #ddd;
     border-radius: 5px;
     padding: 0 8px;
   }

   .tree ul {
     position: relative;
     padding-left: 60px;
     margin: 0;
   }

   .tree ul>li {
     position: relative;
     padding: 5px 0;
   }

   .tree>ul {
     padding: 0;
     margin: 0;
   }

   /** 水平方向连线 */
   .tree>ul ul>li:after {
     content: ' ';
     position: absolute;
     top: 20px;
     left: -45px;
     width: 45px;
     border: none;
     border-top: 1px solid #ddd;
   }

   /** 垂直方向连线 */
  .tree ul>li:not(:last-child):before {
     content: ' ';
     position: absolute;
     top: 0;
     left: -45px;
     height: 100%;
     border: none;
     border-left: 1px solid #ddd;
   }
   .tree ul>li:last-child:before {
     content: ' ';
     position: absolute;
     top: 0;
     left: -45px;
     height: 20px;
     border: none;
     border-left: 1px solid #ddd;
   }

   /** 控制鼠标移上去的颜色 */
   .tree span:hover,
   .tree span:hover+ul span {
     color: #fff;
     background-color: orange;
     cursor: pointer;
   }

   .el-icon-edit-outline:hover,
   .el-icon-delete-solid:hover {
     cursor: pointer;
   }

   .tree span:hover,
   .tree span:hover+ul span,
   .tree span:hover+ul li:before,
   .tree span:hover+ul li:after {
     border-color: orange;
   }

   /** 折叠图标 */
   .tree .fa:before {
     margin-right: 5px;
   }

   .tree .fa-minus-circle,
   .tree .fa-plus-circle {
     cursor: pointer;
   }

   .selectBgc {
     background-color: #1890FF;
     color: #fff !important;
   }
</style>
